<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  <meta name="theme-color" content="#000000"/>
  <title>人码合一 - Louis Han</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'tech-blue': '#0080ff',
            'tech-red': '#ff0040',
            'dark-bg': '#000000',
            'dark-surface': '#0a0a0a',
            'dark-card': '#111111',
          }
        },
      },
    }
  </script>

  <style>
    pre { line-height: 125%; }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc }
.codehilite { background: #f8f8f8; }
.codehilite .c { color: #3D7B7B; font-style: italic } /* Comment */
.codehilite .err { border: 1px solid #F00 } /* Error */
.codehilite .k { color: #008000; font-weight: bold } /* Keyword */
.codehilite .o { color: #666 } /* Operator */
.codehilite .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
.codehilite .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #9C6500 } /* Comment.Preproc */
.codehilite .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
.codehilite .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.codehilite .gr { color: #E40000 } /* Generic.Error */
.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.codehilite .gi { color: #008400 } /* Generic.Inserted */
.codehilite .go { color: #717171 } /* Generic.Output */
.codehilite .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.codehilite .gt { color: #04D } /* Generic.Traceback */
.codehilite .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #008000 } /* Keyword.Pseudo */
.codehilite .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #687822 } /* Name.Attribute */
.codehilite .nb { color: #008000 } /* Name.Builtin */
.codehilite .nc { color: #00F; font-weight: bold } /* Name.Class */
.codehilite .no { color: #800 } /* Name.Constant */
.codehilite .nd { color: #A2F } /* Name.Decorator */
.codehilite .ni { color: #717171; font-weight: bold } /* Name.Entity */
.codehilite .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #00F } /* Name.Function */
.codehilite .nl { color: #767600 } /* Name.Label */
.codehilite .nn { color: #00F; font-weight: bold } /* Name.Namespace */
.codehilite .nt { color: #008000; font-weight: bold } /* Name.Tag */
.codehilite .nv { color: #19177C } /* Name.Variable */
.codehilite .ow { color: #A2F; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #BBB } /* Text.Whitespace */
.codehilite .mb { color: #666 } /* Literal.Number.Bin */
.codehilite .mf { color: #666 } /* Literal.Number.Float */
.codehilite .mh { color: #666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666 } /* Literal.Number.Oct */
.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BA2121 } /* Literal.String.Double */
.codehilite .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
.codehilite .sx { color: #008000 } /* Literal.String.Other */
.codehilite .sr { color: #A45A77 } /* Literal.String.Regex */
.codehilite .s1 { color: #BA2121 } /* Literal.String.Single */
.codehilite .ss { color: #19177C } /* Literal.String.Symbol */
.codehilite .bp { color: #008000 } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #00F } /* Name.Function.Magic */
.codehilite .vc { color: #19177C } /* Name.Variable.Class */
.codehilite .vg { color: #19177C } /* Name.Variable.Global */
.codehilite .vi { color: #19177C } /* Name.Variable.Instance */
.codehilite .vm { color: #19177C } /* Name.Variable.Magic */
.codehilite .il { color: #666 } /* Literal.Number.Integer.Long */

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #000;
      color: #e5e5e5;
    }

    /* 简单边框 */
    .tech-border {
      border: 1px solid rgba(0, 128, 255, 0.2);
    }

    /* 导航链接 */
    .nav-link {
      position: relative;
      color: #888;
      transition: color 0.3s;
      text-decoration: none;
    }

    .nav-link:hover {
      color: #0080ff;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: #0080ff;
      transition: width 0.3s;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    /* 移动端菜单 */
    .mobile-menu {
      transform: translateX(100%);
      transition: transform 0.3s ease;
    }

    .mobile-menu.active {
      transform: translateX(0);
    }

    /* 移动端导航链接 */
    .mobile-nav-link {
      display: block;
      padding: 0.75rem 0;
      color: #d1d5db;
      text-decoration: none;
      transition: color 0.2s;
      font-weight: 500;
    }

    .mobile-nav-link:hover {
      color: #0080ff;
    }

    /* 滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #111;
    }

    ::-webkit-scrollbar-thumb {
      background: #333;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #444;
    }

    /* 代码高亮优化 */
    .highlight {
      background: #0a0a0a;
      border: 1px solid #222;
      border-radius: 8px;
      padding: 1rem;
      overflow-x: auto;
    }

    .highlight pre {
      margin: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.875rem;
      line-height: 1.5;
    }
  </style>
</head>

<body class="min-h-screen bg-dark-bg">
  <!-- 导航栏 -->
  <header class="sticky top-0 z-40 bg-dark-surface/95 backdrop-blur-sm border-b tech-border">
    <div class="max-w-6xl mx-auto px-4 sm:px-6">
      <div class="flex items-center justify-between h-16">
        <!-- Logo -->
        <a href="/" class="flex items-center space-x-3">
          <div class="w-10 h-10 bg-tech-blue rounded-lg flex items-center justify-center">
            <span class="font-mono font-bold text-white">LH</span>
          </div>
          <span class="font-bold text-xl text-white hidden sm:block">louishwh</span>
        </a>

        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-8">
            <a href="/" class="nav-link">Author</a>
            <a href="/blog" class="nav-link">Blogs</a>
            <a href="/projects" class="nav-link">Projects</a>

<!--          <a href="/books" class="nav-link">Books</a>-->
<!--          <a href="/papers" class="nav-link">Papers</a>-->
<!--          <a href="/companies" class="nav-link">Companies</a>-->
<!--            <a href="/showcase" class="nav-link">Showcase</a>-->
            <a href="/contact" class="nav-link">Contact</a>
        </nav>

        <!-- 移动端菜单按钮 -->
        <button id="menu-btn" class="md:hidden p-2 text-gray-400 hover:text-white">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="mobile-menu fixed top-16 right-0 bottom-0 w-64 bg-dark-surface border-l tech-border md:hidden">
      <nav class="p-6 space-y-1">
        <a href="/" class="mobile-nav-link">Author</a>
          <a href="/blog" class="mobile-nav-link">Blogs</a>
        <a href="/projects" class="mobile-nav-link">Projects</a>
<!--        <a href="/books" class="mobile-nav-link">Books</a>-->
<!--        <a href="/papers" class="mobile-nav-link">Papers</a>-->
<!--        <a href="/companies" class="mobile-nav-link">Companies</a>-->
<!--        <a href="/showcase" class="mobile-nav-link">Showcase</a>-->
        <a href="/contact" class="mobile-nav-link">Contact</a>
      </nav>
    </div>
  </header>

  <!-- 主内容 -->
  <main class="min-h-screen">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
      
<div class="max-w-4xl mx-auto">
  <!-- 页面标题 -->
  <div class="mb-12">
    <h2 class="text-4xl font-bold text-white mb-4">博客</h2>
  </div>

  <!-- 年份筛选器 -->
  <div class="mb-12">
    <div class="flex flex-wrap gap-2">
      <a href="/blog"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-tech-blue text-white
                ">
        全部
      </a>
      
      <a href="/blog?year=2025"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-dark-card text-gray-400 hover:text-white hover:bg-gray-800 tech-border
                ">
        2025
      </a>
      
      <a href="/blog?year=2024"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-dark-card text-gray-400 hover:text-white hover:bg-gray-800 tech-border
                ">
        2024
      </a>
      
      <a href="/blog?year=2023"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-dark-card text-gray-400 hover:text-white hover:bg-gray-800 tech-border
                ">
        2023
      </a>
      
      <a href="/blog?year=2022"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-dark-card text-gray-400 hover:text-white hover:bg-gray-800 tech-border
                ">
        2022
      </a>
      
      <a href="/blog?year=2021"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-dark-card text-gray-400 hover:text-white hover:bg-gray-800 tech-border
                ">
        2021
      </a>
      
      <a href="/blog?year=2020"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-dark-card text-gray-400 hover:text-white hover:bg-gray-800 tech-border
                ">
        2020
      </a>
      
      <a href="/blog?year=2019"
         class="px-4 py-2 rounded-lg text-sm font-medium transition-all
                
                  bg-dark-card text-gray-400 hover:text-white hover:bg-gray-800 tech-border
                ">
        2019
      </a>
      
    </div>
  </div>

  <!-- 文章列表 -->
  
    <!-- 按年份分组显示 -->
    
    <section class="mb-16">
      <!-- 年份标题 -->
      <div class="flex items-center mb-8">
        <h2 class="text-2xl font-bold text-white">2025</h2>
        <div class="ml-4 flex-1 h-px bg-gray-800"></div>
        <span class="ml-4 text-sm text-gray-500 font-mono">10 POSTS</span>
      </div>

      <!-- 文章列表 -->
      <div class="space-y-8">
        
        <article class="group">
          <a href="/blog/post/ai-plus" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                人工智能+
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-08-28</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">国务院关于深入实施“人工智能+”行动的意见</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #人工智能-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/generative-engine-optimization" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                GEO
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-08-10</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">Generative Engine Optimization</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #GEO-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #SEO-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/real‑world-assets" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                RWA
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-08-05</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">Real‑World Assets</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #RWA-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #BlockChain-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/data_layer" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                数据分层
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-07-13</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">交易数据的逻辑来源与推演路径</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #trading-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #broker-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #data layer-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/trading_agents" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Trading Agent
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-06-18</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">交易机器人项目调研</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #trading-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-Agent-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/rag-technology-and-practice" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                RAG技术原理与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-04-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #RAG-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #检索增强生成-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术实践-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/Agent2Agent Protocol" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                A2A Protocol
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-04-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Agent-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #人工智能-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术实践-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/bloomberg-API" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Bloomberg API
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-03-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Data Source-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Bloomberg-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/knowledge-graph-theory-and-practice" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                知识图谱技术原理与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-02-19</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #知识图谱-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #图数据库-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术实践-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/ai-agent-architecture-and-practice" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                AI Agent架构与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2025-01-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">具备目标意识、任务执行能力和外部工具集成的智能体</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Agent-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #人工智能-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术实践-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
      </div>
    </section>
    
    <section class="mb-16">
      <!-- 年份标题 -->
      <div class="flex items-center mb-8">
        <h2 class="text-2xl font-bold text-white">2024</h2>
        <div class="ml-4 flex-1 h-px bg-gray-800"></div>
        <span class="ml-4 text-sm text-gray-500 font-mono">7 POSTS</span>
      </div>

      <!-- 文章列表 -->
      <div class="space-y-8">
        
        <article class="group">
          <a href="/blog/post/mcp-protocol-and-practice" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                MCP协议原理与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2024-12-03</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #MCP-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #协议标准-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术实践-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/rust-language-learning" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Rust语言学习心得与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2024-10-14</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Rust-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #系统编程-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #性能优化-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/graphrag-technology" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                GraphRAG技术学习与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2024-07-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #RAG-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #知识图谱-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/time-series-models-research" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                时序模型研究与应用探索
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2024-07-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #时序预测-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #金融分析-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/knowledge-graph-construction" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                知识图谱构建方法与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2024-06-28</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #知识图谱-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #NLP-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/langchain" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                GraphRAG技术学习与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2024-05-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #RAG-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #知识图谱-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/multimodal-model-applications" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                多模态模型应用探索与实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2024-05-30</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #多模态-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #计算机视觉-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
      </div>
    </section>
    
    <section class="mb-16">
      <!-- 年份标题 -->
      <div class="flex items-center mb-8">
        <h2 class="text-2xl font-bold text-white">2023</h2>
        <div class="ml-4 flex-1 h-px bg-gray-800"></div>
        <span class="ml-4 text-sm text-gray-500 font-mono">5 POSTS</span>
      </div>

      <!-- 文章列表 -->
      <div class="space-y-8">
        
        <article class="group">
          <a href="/blog/post/cloud-computing-platform-application" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                云计算平台应用实践总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2023-10-25</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #云计算-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #AWS-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/microservices-architecture-practice" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                微服务架构实践总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2023-10-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #架构设计-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #微服务-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/golang-learning-practice" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Golang学习实践总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2023-09-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #编程语言-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Golang-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/ai-technology-exploration" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                AI技术探索与实践总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2023-08-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #技术-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #人工智能-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #深度学习-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/esp32-development-practice" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                ESP32开发实践与学习心得
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2023-08-04</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #嵌入式-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #IoT-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #ESP32-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
      </div>
    </section>
    
    <section class="mb-16">
      <!-- 年份标题 -->
      <div class="flex items-center mb-8">
        <h2 class="text-2xl font-bold text-white">2022</h2>
        <div class="ml-4 flex-1 h-px bg-gray-800"></div>
        <span class="ml-4 text-sm text-gray-500 font-mono">16 POSTS</span>
      </div>

      <!-- 文章列表 -->
      <div class="space-y-8">
        
        <article class="group">
          <a href="/blog/post/blockchain-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年区块链技术学习回顾
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #区块链-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #加密货币-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #分布式系统-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/design-patterns-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年设计模式学习总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #设计模式-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #软件工程-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #架构设计-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/distributed-database-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年分布式数据库学习总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #分布式数据库-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #TiDB-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #数据库-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/iot-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年物联网技术学习探索
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #物联网-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #IoT-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #嵌入式-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/jvm-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年JVM学习总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #JVM-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Java-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #虚拟机-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/quantitative-trading-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年量化交易学习探索
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #量化交易-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #金融-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #算法-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/rust-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年Rust学习初探
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Rust-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #系统编程-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #新技术-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/spring-learning-2022" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2022年Spring框架学习总结
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-12-31</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Spring-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Java-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #框架-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/消息队列三-mq产品-kafka" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                消息队列三 MQ产品 Kafka
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-09-24</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/消息队列三-mq产品-rabbitmq" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                消息队列三 MQ产品 RabbitMQ
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-09-17</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/消息队列二-协议" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                消息队列二 协议
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-09-10</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/服务端javajvmclassformat" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                服务端@Java@JVM@ClassFormat
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-03-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/服务端javaspring体系" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                服务端@Java@Spring体系
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-01-29</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/esp32初体验" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                ESP32初体验
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-01-16</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/服务端java" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                服务端@Java
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-01-02</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/数据库排名" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                数据库@排名
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2022-01-01</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
      </div>
    </section>
    
    <section class="mb-16">
      <!-- 年份标题 -->
      <div class="flex items-center mb-8">
        <h2 class="text-2xl font-bold text-white">2021</h2>
        <div class="ml-4 flex-1 h-px bg-gray-800"></div>
        <span class="ml-4 text-sm text-gray-500 font-mono">14 POSTS</span>
      </div>

      <!-- 文章列表 -->
      <div class="space-y-8">
        
        <article class="group">
          <a href="/blog/post/架构_web高伸缩架构" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                架构_Web高伸缩架构
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-12-21</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/架构_web架构演化历程" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                架构_Web架构演化历程
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-12-05</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/java_ip转地址" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Java_IP转地址
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-11-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/java_图片生成" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Java_图片生成
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-11-14</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/java_pdf工具" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Java_PDF工具
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-11-06</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/raspberry-pico" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Raspberry-Pico
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-10-30</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/piconeo3初体验" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                PicoNeo3初体验
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-09-11</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/暴富还是无奈" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                暴富还是无奈？
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-09-10</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/python技能树" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Python技能树
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-09-07</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/scrapy使用教程" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Scrapy使用教程
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-04-07</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## 执行过程</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Python】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/记忆技术" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                记忆技术
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-02-21</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/python图片处理到打包app" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Python图片处理到打包app
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-02-14</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 需求介绍</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Python】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/mac游戏bombsquad" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Mac游戏BombSquad
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-02-12</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 很早之前玩过的游戏</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【休闲】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/如何系统学习编程" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                如何系统学习编程--
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2021-01-26</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
            </div>
          </a>
        </article>
        
      </div>
    </section>
    
    <section class="mb-16">
      <!-- 年份标题 -->
      <div class="flex items-center mb-8">
        <h2 class="text-2xl font-bold text-white">2020</h2>
        <div class="ml-4 flex-1 h-px bg-gray-800"></div>
        <span class="ml-4 text-sm text-gray-500 font-mono">9 POSTS</span>
      </div>

      <!-- 文章列表 -->
      <div class="space-y-8">
        
        <article class="group">
          <a href="/blog/post/learning-netty" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                深入网络编程：基于Netty构建高性能RPC框架
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-10-26</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Netty-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #NIO-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #RPC-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Network Programming-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-nginx" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Nginx入门：高性能Web服务的看门人
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-04-05</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Nginx-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Web Server-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Reverse Proxy-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Load Balancing-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-quantitative-trading" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                探索金融与代码的交汇点：量化交易初探
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-03-12</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Quantitative Trading-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Python-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Pandas-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Numpy-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-database-design" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                从应用到架构：我的数据库设计学习之路
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-03-05</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Database-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #MySQL-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Architecture-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Backend-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-java-data-structures-and-algorithms" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                重拾Java：数据结构与算法基础夯实
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-02-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Java-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Data Structures-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Algorithms-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Backend-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-moya" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                优雅的网络层封装：Moya框架实践
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-02-14</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Moya-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Networking-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #iOS-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #RxSwift-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-rxswift" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                深入响应式编程：我的RxSwift学习之旅
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-02-12</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #RxSwift-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Reactive Programming-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #iOS-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-kotlin" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                拥抱Kotlin：从移动端到后端的新选择
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-01-01</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Kotlin-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Android-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Backend-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/learning-swiftui" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                2020年，从SwiftUI开始探索声明式UI
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2020-01-01</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #SwiftUI-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #iOS-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #Apple-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
      </div>
    </section>
    
    <section class="mb-16">
      <!-- 年份标题 -->
      <div class="flex items-center mb-8">
        <h2 class="text-2xl font-bold text-white">2019</h2>
        <div class="ml-4 flex-1 h-px bg-gray-800"></div>
        <span class="ml-4 text-sm text-gray-500 font-mono">37 POSTS</span>
      </div>

      <!-- 文章列表 -->
      <div class="space-y-8">
        
        <article class="group">
          <a href="/blog/post/golang" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Golang
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-12-09</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### GO基础啊</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Go】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/rsa加密技术" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                RSA加密技术
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-11-19</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 参考文章</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【加密】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/libra结构" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Libra结构
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-11-11</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 文件结构</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Rust】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/rust标准库" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Rust标准库
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-11-06</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">&gt; [参考一](https://doc.rust-lang.org/std/)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Rust】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/椭圆曲线加解密算法" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                椭圆曲线加解密算法
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-11-01</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 参考资料 </p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【工具】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/深入理解操作系统2" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                深入理解操作系统2
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-10-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">1. 进制转换</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【读书】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/深入理解操作系统1" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                深入理解操作系统1
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-10-19</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">![深入理解操作系统](/images/2019-10-19-深入理解操作系统.jpg)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【读书】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/开源组织和协议" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                开源组织和协议
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-10-10</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## 开源基金会</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【编程常识】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/redis源码阅读" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                redis源码阅读
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-10-10</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## 概要</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【必备技能】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/jvm系后端知识框架" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                JVM系后端知识框架
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-10-04</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">![/images/2019-10-04Jvm后端.png](/images/2019-10-04Jvm后端.png)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Java】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/springboot工具集" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                SpringBoot工具集
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-09-24</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 阐述的内容</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Java】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/tomcat简介" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Tomcat简介
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-09-23</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[Tomcat源码](https://github.com/apache/tomcat)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Java】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/架构与设计模式" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                架构与设计模式
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-08-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">#### 依赖</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【iOS】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/ios-uikit" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                iOS-UIKit
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-08-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[Apple官网-UIKit](https://developer.apple.com/documentation/uikit)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【iOS】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/foundation" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Foundation
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-08-14</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[参考一](https://www.jianshu.com/p/495f5f8045ee)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【iOS】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/ios系统框架" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                iOS系统框架
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-08-13</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">#### [Apple系统框架](https://developer.apple.com/documentation/) </p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【iOS】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/去中心化应用" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                《去中心化应用》
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-07-30</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">#### 索引</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【书籍】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/kotlin" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Kotlin
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-07-21</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">&gt; 世界上没有最好的编程语言，就像世界上没有最好的人一样。</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Kotlin】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/apple那些事" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Apple那些事
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-07-06</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 证书申请那些事</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【iOS】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/ios砸壳" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                iOS砸壳
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-07-06</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 砸壳是什么？</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【iOS】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/dockermysqlredis" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Docker:MySQL、Redis
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-06-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## MySQL安装</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Docker】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/libra项目" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Libra项目
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-06-20</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[Libra白皮书](https://libra.org/zh-CN/white-paper/#how-to-get-involved)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Rust】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/百度超级链-xuperchain" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                百度超级链-XuperChain
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-06-16</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 内容概要</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Go】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/centosdockernginx-web" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                CentOS:Docker:Nginx-Web
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-06-15</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 问题定位</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Docker】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/rust的web框架actix" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Rust的Web框架：Actix
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-05-26</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[Rust的Web框架：Actix](https://actix.rs/)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Rust】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/rust初识" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Rust初识
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-05-12</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">程序员不应该拘泥于编程语言和框架，进化才是王道。</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Rust】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/金融与量化分析" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                金融与量化分析
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-05-08</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">#### 股票：</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【股票】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/ml机器学习" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                【ML】机器学习
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-03-24</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[机器学习笔记](https://github.com/clone95/Machine-Learning-Study-Path-March-2019/tree/master/Career%20Path...</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Python】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/julia知识点" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Julia知识点
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-03-24</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[Julia为什么快？](https://mp.weixin.qq.com/s/HNdR3PahyExix3F6O8yHeA)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Julia】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/python知识点" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Python知识点
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-03-24</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">[时间总汇](https://blog.csdn.net/BF02jgtRS00XKtCx/article/details/78448799)</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Python】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/eos合约研讨会" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                EOS合约研讨会
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-03-22</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## EOS合约开发：</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #三月-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/理论p2p网络拓扑结构与内容路由" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                【理论】P2P网络拓扑结构与内容路由
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-03-21</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## P2P网络：</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #三月-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/web后端技术总汇" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Web后端技术总汇
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-03-16</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## Web后端技术栈：</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #三月-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/sublime-text" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Sublime Text
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-02-10</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">### 用Sublime Text的理由</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【工具】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/原理计算机网络1梗概" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                【原理】计算机网络1：梗概
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-02-09</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">1. 网络分层结构</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【基础知识】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/three-years-later" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                三年后的开篇
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-01-28</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">None</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #体会-->
<!--                </span>-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #教程-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
        <article class="group">
          <a href="/blog/post/tensorflow的使用" class="block">
            <div class="p-6 bg-dark-card rounded-lg tech-border transition-all hover:border-tech-blue/50">
              <!-- 文章标题 -->
              <h3 class="text-xl font-semibold text-white mb-3 group-hover:text-tech-blue transition-colors">
                Tensorflow的使用
              </h3>

              <!-- 元信息 -->
              <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500 mb-4">
                <time class="font-mono">2019-01-28</time>
                
              </div>

              <!-- 摘要 -->
              <p class="text-gray-400 mb-4 line-clamp-2">## 目录</p>

              <!-- 标签 -->
<!--              -->
<!--              <div class="flex flex-wrap gap-2">-->
<!--                -->
<!--                <span class="text-xs px-2 py-1 rounded bg-gray-800 text-gray-400">-->
<!--                  #【Tensorflow】-->
<!--                </span>-->
<!--                -->
<!--              </div>-->
<!--              -->
            </div>
          </a>
        </article>
        
      </div>
    </section>
    

  

  <!-- 空状态 -->
  
</div>

<!-- 添加 line-clamp 样式支持 -->
<style>
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 文章卡片悬停效果 */
  .group:hover .tech-border {
    border-color: rgba(0, 128, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 128, 255, 0.1);
  }

  /* 标签悬停效果 */
  article span:hover {
    background-color: rgba(0, 128, 255, 0.1);
    color: #0080ff;
  }
</style>

    </div>
  </main>

  <!-- 页脚 -->
  <footer class="border-t tech-border mt-20">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
      <!-- 信息卡片组 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">

        <!-- 品牌卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border text-center">
          <h3 class="text-2xl font-bold text-white mb-2">人码合一</h3>
          <p class="text-sm text-gray-400">HUMAN CODE UNITY</p>
        </div>
        
        <!-- 状态卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border">
          <h4 class="text-sm font-mono text-gray-400 mb-3">SYSTEM STATUS</h4>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-gray-500">Version</span>
              <span class="font-mono text-tech-blue">v3.0.1</span>
            </div>
            <div class="flex justify-between">
              <span class="text-gray-500">Status</span>
              <span class="font-mono text-green-500">ONLINE</span>
            </div>
          </div>
        </div>

        <!-- 社交卡片 -->
        <div class="bg-dark-card rounded-lg p-6 tech-border">
          <h4 class="text-sm font-mono text-gray-400 mb-3">CONNECT</h4>
          <div class="flex space-x-4">
            <a href="https://github.com/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
              </svg>
            </a>
            <a href="https://twitter.com/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
              </svg>
            </a>
            <a href="https://linkedin.com/in/louishan" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
              </svg>
            </a>
            <a href="mailto:louis@example.com" class="text-gray-400 hover:text-white transition-colors">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-gray-800">
        <div class="flex items-center space-x-4 mb-4 md:mb-0">
          <span class="text-sm text-gray-500">© 2025 Louis Han</span>
          <span class="text-sm text-gray-500">|</span>
          <span class="text-sm text-gray-500">人码合一</span>
        </div>

        <div class="flex items-center space-x-4 text-xs text-gray-600">
          <span>Built with ❤️</span>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // 移动端菜单控制
    const menuBtn = document.getElementById('menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
        let isMenuOpen = false;

    menuBtn.addEventListener('click', () => {
      isMenuOpen = !isMenuOpen;
      mobileMenu.classList.toggle('active', isMenuOpen);
      document.body.style.overflow = isMenuOpen ? 'hidden' : '';
    });

    // 点击菜单外关闭
    document.addEventListener('click', (e) => {
      if (isMenuOpen && !mobileMenu.contains(e.target) && !menuBtn.contains(e.target)) {
        isMenuOpen = false;
        mobileMenu.classList.remove('active');
        document.body.style.overflow = '';
      }
    });

    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });

    // 页面加载完成后添加淡入效果
    window.addEventListener('load', () => {
      document.body.style.opacity = '1';
    });
  </script>

  <style>
    /* 初始状态 */
    body {
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* 打印样式 */
    @media print {
      header, footer {
        display: none !important;
      }

      body {
        background: white !important;
        color: black !important;
      }

      .tech-border {
        border-color: #ddd !important;
      }
    }

    /* 响应式优化 */
    @media (max-width: 640px) {
      .highlight {
        margin-left: -1rem;
        margin-right: -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
      }
    }
  </style>
</body>
</html>